<template>
	<div v-if="showStatus" class="page" :style="{'background': setData.bgcolor || 	'#F5F5F5'}">
		<view class="container">
			<view class="t_box">
				<view class="section_top" v-if="setData.show_winner && prizeText!=''" >
					<uni-notice-bar background-color="rgba(0,0,0,0.5)" :show-icon="false" color="#fff" icon="info-filled" :speed="50" scrollable :text="prizeText" />
				</view>
				<view class="info_control">
					<div class="music" :style="{'background':openMusic?'rgba(0,0,0,.5)':'none'}">
						<MusicAutoPlay class="open" ref="audioCon" :music="setData.bgmusic" v-if="openMusic">
						</MusicAutoPlay>
					</div>
					<div class="complain" @click="next(1)">投诉</div>
				</view>
				<div class="btn_icon">
					<div class="share" @click="next(2)">
						分享活动
					</div>
					<div class="prize" @click="next(3)">
						我的奖品
					</div>
				</div>
			</view>
			<view class="header_box" v-if="setData.web_banner!=''">
				<image :src="setData.banner" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="cards">
			<div class="activity_num" :class="{'noworknum':!setData.works_num}" v-if="setData.show_data">
				<div>
					<div>浏览量</div>
					<div>{{activityText.view_num }}</div>
				</div>
				<div class="votes">
					<div>参与数</div>
					<div>{{activityText.play_num  }}</div>
				</div>
				<div>
					<div>中奖数</div>
					<div>{{activityText.win_num }}</div>
				</div>
			</div>
			<div class="activ">
				<div class="title_con" v-if="setData.show_title">
					<div class="ru"></div>
					<div class="title">{{data.title}}</div>
					<div class="ru"></div>
				</div>
				<div class="timer">活动截止时间：<span style="margin-right: 12rpx;">{{timeStampText.d}}天 </span><span style="margin-right: 8rpx;">{{timeStampText.h}}小时</span><span style="margin-right: 8rpx;">{{timeStampText.m}}分</span><span>{{timeStampText.s}}秒</span></div>
				<div class="card_con an1_box">
					<div class="card" :class="{'an1_rotate':startAni==index,'an1_carsh':washCard,}" :style="{'zIndex':index==1?'2':'1'}" v-for="(iten,index) in 3" @click="rotateCard(index)">
						<img  v-if="noCardBg!=index " :src="setData.cards_image" alt="">
						<view v-else class="prize_info">
							<view class="prize_img" :style="{'background':'url('+checkPrizeImage(prizeData)+') no-repeat center center'}"></view>
							<view class="prize_title">{{ prizeData.title }}</view>
						</view>
					</div>
				</div>
			</div>
			<div class="chance">
				剩余活动次数 <span>{{chance}}</span> 次
			</div>
		</view>
		<view style="margin: 30rpx 0 -20rpx;" v-if="setData.service_open">
			<service></service>
		</view>
		<view style="margin-bottom: 41rpx;" class="info_rule">
			<view v-for="(item,index) in rules" :key="index">
				<view class="info">
					<view>
						<view></view>
						<span>{{item.title}}</span>
						<view></view>
					</view>
					<view>
						 <view class="dec" v-html="item.content">{{item.content}}</view>
					 </view>
				</view>
			</view>
		</view>
		<div class="sports_swiper" v-if="bottom_ads.length!=0 &&setData.bottom_ad_open==true">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :current="0">
				<swiper-item v-for="(item,index) in bottom_ads">
					<div class="swiper_content" @click="jumpNew(item.link)">
						<image v-if="checkType(item.image)=='image'" class="swiper_img" :mode="'scaleToFill'"
							:src="item.image"></image>
						<video class="swiper_video" v-if="checkType(item.image)=='video'" :src="item.image"
							:enable-progress-gesture="false" controls>
						</video>
					</div>
				</swiper-item>
			</swiper>
		</div>
		
		<view class="footer_name" v-if="setData.copyright!=''"
			:style="{padding:setData.vote_countdown || setData.vote_reg || setData.show_data?' 0 0 20rpx':'0'}">
			{{setData.copyright}}
		</view>
		
		<view class="getMoreTimes">
			<img :src="setData.task_float" @click="openTaskCenter" v-if="taskMenuData.length>0"></img>
		</view>
		<view class="modal_rule fadeIn_an"  @touchmove.prevent v-if="modal">
			<view class="con" v-if="prizeData.type!=0">
				<view class="adver" @click="jumpNew(bet_ads[0].link)" :style="{'background':'url('+ (bet_ads.length >0? bet_ads[0].image : setData.win_popup)   +') no-repeat center center','top':bet_ads.length>0? '-267rpx':'-224rpx'}"></view>
				<view class="prize_img"  :style="{'background':'url('+checkPrizeImage(prizeData)+') no-repeat center center'}"></view>
				<view class="prize_name">{{prizeData.title}}</view>
				<view class="btn">
					<view class="cancel" @click="closeModal">取消</view>
					<view class="view" @click="next(3)">查看奖品</view>
				</view>
			</view>
			<view class="con noPrize" v-else>
				<view class="adver" v-if="bet_ads.length>0" :style="{'background':'url('+bet_ads[0].image+') no-repeat center center'}" @click="jumpNew(bet_ads[0].link)"></view>
				<view class="prize_img"  :style="{'background':'url('+checkPrizeImage(prizeData)+') no-repeat center center'}"></view>
				<view class="prize_name">{{prizeData.title}}</view>
				<view class="agin" @click="closeModal">再翻一次</view>
			</view>
		</view>
		<taskCenter ref="taskcenter" @backNums="getNum"  :show="showTask" :topImage="setData" :list="taskMenuData" @close="handlerCloseTaskCenter" @finish="handlerTaskFinish"></taskCenter>
		<advertise :data="advSet" @close="closeAdv"></advertise>
		<share v-if="showShare" :data="data" @close="showShare=false"></share>
		<guide></guide>
		<collectPhone  :data="data" ></collectPhone>
		<help :data="setData" v-if="showHelpModal" @hideMissionModal="hideModal"></help>
	</div>
</template>

<script>
	import help from "../../../components/taskCenter/help";
	import watermarkOption from '@/until/water.js'
	import {ActivityInfo,chance,activityText,taskList,getCardsPrize} from '@/api/api.js'
	import { LoginApp, checkLogin,isWeiXin,isQianfan,checkPlatform,proxyShareFun,checkImage} from '@/until/QFH5.js'
	import { mapGetters } from "vuex";
	import {formatTime} from '@/until/tool.js'
	import * as frameJs from '@/model/frameData'
	export default{
		computed: {
			...mapGetters(['guide'])
		},
		data(){
			return{
				showStatus:true,
				loginStatus: false,
				actid: '',
				pageStatus: 0,
				activityText:{},
				chance:0,
				data: {},
				advSet: {},
				setData: {},
				bet_ads:[],
				rules: [],
				bottom_ads: [],
				openMusic: false,
				showTask: false, //任务中心
				taskMenuData: [], //任务中心菜单
				showShare: false, //分享
				prizeText:'',
				showHelpModal:false,
				timer:null,//倒计时
				timeStampText:{
					d:0,
					h:'0',
					m:'0',
					s:'0'
				},
				startAni:-1,
				noCardBg:-1,
				washCard:false,
				animationSock:false,//动画
				modal:false,
				prizeData:{
					title:'谢谢参与',
					image:require('../../../static/guess/prize.png'),
					type:0
				},
			}
		},
		methods:{
			//隐藏
			hideModal() {
				this.showHelpModal = false
			},
			jumpNew(url){
			  if('' == url || undefined == url){
			    return;
			  }else{
			    window.open(url)
			  }
			
			},
			closeModal(){
				this.modal = false
				this.animationSock = false
				this.startAnimation()
			},
			//洗牌
			startAnimation(val){
				if(this.animationSock){
					return
				}
				this.animationSock = true
				this.noCardBg = -1
				this.startAni = -1
				this.washCard = true
				setTimeout(()=>{
					this.washCard = false
					this.animationSock = false
				},2000)
			},
			//翻卡抽奖
			rotateCard(val){
				let back= ()=>{
					if(this.chance==0){
						uni.showToast({
							title:'当前活动次数不足',
							icon:'none'
						})
						return
					}
					if(this.noCardBg!=-1 || this.animationSock){
						return
					}
					this.animationSock = true
					let _t = this
					getCardsPrize({id:this.actid}).then(res=>{
						_t.startAni = val
						setTimeout(() => {
							_t.noCardBg = val
							if(res.data.ret==1){
								_t.prizeData = res.data.prize
							}else{
								_t.prizeData = {
									type:0,
									image:require('../../../static/guess/prize.png'),
									title:res.data.msg
								}
							}
						}, 500);
						setTimeout(() => {
								_t.modal = true
						}, 1300);
						_t.initWorksChance()
						_t.getActivity()
					})
				}
				
				this.getAuth(back)
				
			},
			checkPrizeImage(data){
				return checkImage(data.type,data.image)
			},
			getNum(val) {
				this.chance = val
			},
			//格式化时间
			settime(val){
				return formatTime(val,'YYYY-MM-DD HH:MM')
			},
			next(val) {
				if(val==1){//投诉
					 let callback=()=>{
					 	this.$navigateTo({url:'/plugin/pages/complain?id='+this.actid+'&type='+this.type+'&plugin='+this.$route.query.plugin})
					 }
					 this.getAuth(callback)
				}else if(val==2){//分享
					 this.showShare = true
				}else if(val==3){//我的奖品
					let callback=()=>{
						let url ='/plugin/pages/guess/prize?id='+this.actid
						this.$navigateTo({ url:url})
					}
					this.getAuth(callback)
				}
			},
			//关闭广告
			closeAdv() {
				this.advSet.start_ad_show = false
				this.advSet.popup_ad_show = false
			},
			openTaskCenter() {
				let callback = () => {
					this.showTask = !this.showTask
					this.$refs['taskcenter'].getCard()
				}
				this.getAuth(callback)
			},
			handlerCloseTaskCenter() {
				this.showTask = false
				this.initTask()
		
			},
			initTask() {
				taskList({
					actid: this.actid
				}).then(res => {
					this.taskMenuData = res.data
				})
			},
			handlerTaskFinish(){
				this.initTask()
			},
			handlerTaskFinish(){
				this.initTask()
			},
			login() {
				if (this.checkPlat()) {
					LoginApp(this.actid)
				}
			},
			//检查平台
			checkPlat() {
				let plat = checkPlatform()
				if (!plat) {
					this.$store.dispatch('setGuideShow', 4)
				}
				return plat
			},
			getAuth(callback = () => {}, back = () => {}, isNeglect = false) {
				let {
					isWechat,
					phone
				} = this.guide
				if (this.checkPlat()) {
					if (!isNeglect && this.pageStatus == 0) {
						uni.showToast({
							title: '活动还没开始呢',
							icon: 'none'
						})
						return
					}
					if (!isNeglect && this.pageStatus == 1) {
						uni.showToast({
							title: '活动已经结束了',
							icon: 'none'
						})
						return
					}
					if (!this.loginStatus) {
						this.login()
						return
					}
		
					//收集信息
					if (this.data.collect == 1 && this.showCollectPhone == '' && isWeiXin()) {
						this.$store.commit('SET_SHOWCOLLECT', true)
						return
					}
					if (isQianfan()) {
						if (!isWechat) {
							this.$store.dispatch('setGuideShow', 1)
							back()
							return
						}
						if (phone == "") {
							this.$store.dispatch('setGuideShow', 2)
							if (this.guaStatus) {
								this.resetGua()
								this.guaStatus = false
							}
							return
						}
						callback()
					} else {
						callback()
					}
				}
				
			},
			async init() {
				let res = null
				let nowTime = Math.floor(new Date() / 1000)
				if (!this.isframe) {
					res = await ActivityInfo({ actid: this.actid })
				} else {
					res = this.frameData
				}
				if (res.code == 0) {
					// #ifdef H5
					if (res.data.status == 0) {
						watermarkOption.set('活动未发布')
					}
					// #endif
					this.$setTitle(res.data.title)
					uni.setStorageSync('title', res.data.title)
					uni.setStorageSync(this.actid+'ActivityData',JSON.stringify(res.data))
					this.data = res.data
					let _this = this
					this.$nextTick(() => {
						let token = localStorage.getItem(_this.actid + 'bearerToken') || null
						if (token != null && _this.$store.state.long == 0 && _this.$store.state.lat == 0 &&
							_this.data.area && _this.data.area.type == 3) {
							_this.$store.dispatch('getPos')
							window.getLocationCallBackFun = () => {}
						}
					})
					uni.setStorageSync('collectData', res.data)
					let { settings } = res.data
					uni.setStorageSync('platform', JSON.stringify(settings.platform))
					this.setData = settings
					this.advSet = settings
					this.bottom_ads = settings.bottom_ads
					this.bet_ads = settings.bet_ads
					//规则排序
					this.rules = []
					settings.sort.forEach(item => {
						if (res.data[item]) {
							let obj = {
								title: this.formartText(item),
								content: res.data[item]
							}
							this.rules.push(obj)
						}
					})
					if (settings.layer_banner != '') {
						this.pageStatus = 3
					}
					this.$store.dispatch('serviceInfo', settings)
				}
				if (nowTime < res.data.start_time) {
					this.pageStatus = 0
					this.times = res.data.start_time
					// this.startTime()
				} else if (nowTime > res.data.expire_time) {
					this.pageStatus = 1
				}else{
					this.startTime(res.data.expire_time-nowTime)
				}
				if(!this.isframe){
					this.initTask()
				}
				this.$nextTick(() => {
					let data = res.data
					proxyShareFun(data.settings.title, data.settings.image, data.settings.desc, window.location.href)
				})
			},
			//获取动态文本
			getActivity(){
				activityText({actid:this.actid}).then(res=>{
					if(res.code ==0){
						this.activityText = res.data
						this.prizeText = ''
						res.data.winners.map(item=>{
							this.prizeText+=item.message+' '
						})
						let _this = this
						this.showStatus = true
						if(res.data.has_task && this.taskMenuData.length==0){
							this.initTask()
						}
						this.$nextTick(()=>{
							this.$refs['taskcenter'].getCard()
						})
					}
				})
			},
			checkType(val) {
				return this.$checkType(val)
			},
			initTask() {
				taskList({
					actid: this.actid
				}).then(res => {
					this.taskMenuData = res.data
				})
			},
			formartText(val){
				let {business_intro,activity_rules,prize_intro} = this.setData.custom_desc_key
				switch(val){
					case 'business_intro':return business_intro!=''?business_intro:'商家介绍'
					case 'activity_rules':return activity_rules!=''?activity_rules:'活动规则'
					case 'prize_intro':return prize_intro!=''?prize_intro:'奖品介绍'
				}
			},
			formatImage(host, val) {
				return host + val
			},
			setIframeData(){
				
				let _this = this
				window.addEventListener('message',function(e){
					console.log('接受到了',e.data)
					let data = e.data
					_this.actid = data.slug
					// return
					//强制兼容后台数据
					_this.frameData={ code:0, data:data }
					let {settings}=data
					_this.activityText={
						view_num:settings.view_num || 25487,
						play_num:settings.play_num || 779,
						win_num:settings.win_num || 99,
					}
					let {popup} = data
					switch(popup){
						case 'win_popup':
							_this.prizeData = { id: 116, redid: 0, title: "示例奖品", type: 2, }
							_this.modal=true
							break;
						case 'closewin_popup':
							_this.modal=false
							break;
						case "task_popup":
							_this.taskMenuData = frameJs.taskMenuData
							_this.showTask=true
							break;
						case "closetask_popup":
							_this.showTask=false
							break;
						default:break;
					}
					_this.prizeText = '恭喜张三获得奖品一个 恭喜李四获得奖品一个 恭喜王五获得美团红包'
					_this.init()
					_this.showStatus = true
				})
			},
			initWorksChance(){
				chance({actid:this.actid}).then(res=>{
					this.chance = res.data.num
				})
			},
			//时间戳倒计时
			startTime(val) {
				clearInterval(this.timer)
				let data = val
				let _this = this
				this.timer = setInterval(() => {
					data--;
					if(data==0){
						clearInterval(this.timer)
					}
					_this.fTime(data)
				}, 1000)
			},
			fTime(time) {
				if(time<=0){
					return
				}
				let day = Math.floor(time / 86400)
				let other = time % 86400
				let hours = Math.floor(other / 3600)
				let minutes = Math.floor(other % 3600 / 60)
				let second = Math.floor(other % 60)
				this.timeStampText={
					d:day,
					h:hours,
					m:minutes,
					s:second
				}
				
				return day + '天' + this.fstr(hours) + '小时'+ this.fstr(minutes) + '分' +this.fstr(second)+'秒'
			},
			fstr(tr) {
				if (tr > 9) return tr
				return '0' + tr
			},
		
		},
		async mounted(){
			this.loginStatus = await checkLogin()
			if(!this.isframe){
				if(this.loginStatus){
					this.initWorksChance()
				}
				this.init()
				this.getActivity()
			}else{
				this.setIframeData()
			}
			let code = uni.getStorageSync(this.actid+'Invite') || 0
			if(code != 0 ){
				this.showHelpModal = true
			}
			
		},
		created() {
			this.actid = uni.getStorageSync('actid')
			this.$store.commit('SETACTIVITYNAME', 'cards')
			let web = uni.getStorageSync('WEB') || null
			if(web){
				this.isframe = true
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "./cards.scss";
	@keyframes ani1 {
		0%{
			position: relative;
			
		}
		5%{
			marign: 0 10rpx;
		}
		9%{
			margin: 0 -20rpx;
		}
		13%{
			// margin: 0 -80rpx;
			margin: 0 -40rpx;
		}
		17%{
			// margin: 0 -130rpx;
			margin: 0 -60rpx;
		}
		21%{
			// margin: 0 -160rpx;
			margin: 0 -80rpx;
		}
		23%{
			margin: 0 -93rpx;
			// margin: 0 -180rpx;''
		}
		55%{
			position: absolute;
		}
		58%{
			transform: scale(0.9);
		}
		61%{
			transform: scale(1.1);
		}
		64%{
			transform: scale(1);
		}
		84%{
			// margin: 0 -180rpx;
		}
		80%{
			margin: 0 -93rpx;
		}
		84%{
			margin: 0 -60rpx;
		}
		90%{
			margin: 0 -20rpx;
		}
		99%{
			margin: 0 10rpx;
			// margin: 0;
		}
		100%{
			position: relative;
		}
	}
	@keyframes  ani2{
		0%{
			transform: scale(1);
		}
		11%{
			transform: scale(0.95);
		}
		18%{
			transform: scale(1.02)
		}
		20%{
			transform: rotateY(0deg);
		}
		25%{
			transform: rotateY(30deg);
		}
		50%{
			transform: rotateY(90deg);
		}
		65%{
			transform: rotateY(60deg);
		}
		79%{
			
		}
		80%{
			transform: rotateY(0deg);
		}
		100%{
			
		}
	}
	 
	.an1_carsh{
		animation: ani1 2s linear infinite;
	}
	.an1_rotate{
		animation: ani2 1s linear 1;
	}
	.an1_box{
		position: relative;
		min-height: 200rpx;
	}
</style>